(function ($) {
  var timer = null;
  var originWidth = 0;
  var originHeight = 0;
  function Slide(ele, options) {
    this.$ele = $(ele);
    this.$ct = $(options.ct);
    this.options = $.extend({ speed: 1000, delay: 3000 }, options);
    this.states = [];
    this.$ul = this.$ele.find('ul');
    this.lis = this.$ul.find('li');
    this.interval = null;
    var liWidth = this.$ele.width() * 0.165;
    var liHeight = liWidth * 1.4; // 高度是宽度的1.4倍
    var start = 0;
    var end = this.lis.length - 1;
    var scale = 0.8;
    var mid = Math.ceil(end / 2);
    var totalLeft = 0;
    var prevWidth = 0;  // 前一个元素的宽度
    originWidth = liWidth;
    this.mid = mid;
    this.end = end;
    this.liWidth = liWidth;
    this.liHeight = liHeight * 1.4;
    for (var i = start; i <= end; i++) {
      var rate = Math.abs(i - mid);
      var width = liWidth * Math.pow(scale, rate);  // 每个图片的宽度
      var height = liHeight * Math.pow(scale, rate);  // 每个图片的高度
      if (i !== 0) {
        prevWidth = liWidth * Math.pow(scale, Math.abs(i - 1 - mid));
        totalLeft += prevWidth * scale
      }
      if (i === mid) {
        // 外包装元素的高度按最高的图片高度算
        this.$ul.css('height', Math.ceil(height) + 'px');
      }
      if (i === end) {
        // 计算完成时，给外包装元素设置宽度
        var totalWidth = totalLeft + width;
        this.$ul.css('width', Math.ceil(totalWidth) + 'px');
      }

      // 计算各图片的位置
      var state = {
        '&zIndex': Math.ceil(Math.pow(scale, rate) * 100),
        width: Math.ceil(width) + 'px',
        height: Math.ceil(height) + 'px',
        top: Math.ceil((liHeight - liHeight * Math.pow(scale, rate)) / 3) + 'px',
        left: Math.ceil(totalLeft) + 'px',
        opacity: Math.pow(scale, rate),
        index: i
      };
      this.states.push(state);
    }
    this.$ele.find('section:nth-child(2)').on('click', function () {
      this.stop();
      this.next();
      this.play();
    }.bind(this));
    this.$ele.find('section:nth-child(1)').on('click', function () {
      this.stop();
      this.prev();
      this.play();
    }.bind(this));
    this.move();
    this.play();
  }

  Slide.prototype = {
    move: function () {
      this.lis.each(function (i, el) {
        var state = this.states[i];
        $(el).css('z-index', state['&zIndex']).finish()
          .animate(state, this.options.speed)
      }.bind(this));

      if (this.$ct) {
        var index = this.states[this.mid].index;
        var html = this.lis.eq(this.end - index).html();
        this.$ct.html(html);
      }
    },
    next: function () {
      this.states.unshift(this.states.pop());
      this.move();
    },
    prev: function () {
      this.states.push(this.states.shift());
      this.move()
    },
    play: function () {
      timer = setInterval(function () {this.next()}.bind(this), this.options.delay)
    },
    stop: function () {clearInterval(timer)}.bind(this),
    destory: function () {
      this.stop();
      this.lis.each(function (i, el) {
        $(el).css({ width: originWidth + 'px', height: originHeight + 'px' });
      }.bind(this));

      this.$ele = null;
      this.$ct = null;
      this.options = null;
      this.states = null;
      this.lis = null;
      this.mid = null;
    }
  };
  $.fn.zySlide = function (options) {
    var obj = null;
    this.each(function (i, ele) {obj = new Slide(ele, options)});
    this.destory = function () {
      obj.destory();
    };
    return this
  }
})(jQuery);
